@charset "utf-8";
@import "reset";
@mixin bgg($width,$height){
    width: $width/2;
    height: $height/2;
}
@mixin img(){
    width:100%;
    height: 100%;
}
@function px($px){
    @return ($px/2);
}
$fontsize:20;
@function r($px){
    @return $px/(2*$fontsize) * 1rem;
} 
html,body{
            width: 100%;
            height: 100%;
        }
        #web{
            width: 100%;
            height: 100%;
            position: relative;
        }
        header{
            width: 100%;
            height: r(150);
            background: white;
            position: absolute;
            top: 0;
            left: 0;
            div{
                vertical-align: middle;
            }
            .logo{
                width: r(124);
                height: r(124);
                overflow: hidden;
                float: left;
                margin-left: r(20);
                margin-top: r(16);
                img{
                     width: 100%;
                     height: 100%;
                }
            }
            .searchBar{
            width: 38%;
            height: r(50);
            line-height: r(50);
            border: 1px solid #ff9344;
            border-radius: 25px;
            padding: 0 r(18);
            box-sizing: border-box;
            margin: r(52) auto 0;
            position: relative;
            input{
                width: 90%;
                height: 100%;
                border: none;
                vertical-align: top;
                font-size: r(24);
                color: #777777;
                border-radius: 4px;
            }
            i{
                font-size: r(28);
                color:#ff9344;
                position: absolute;
                right: r(12);
            }
           }
         .selectBar{
            width: 21%;
            height: r(54);
            line-height: r(50);
            border: 1px solid #ff9344;
            float: right;
            margin-right: r(22);
            margin-top: r(48);
            background: url(../img/down.png) no-repeat right r(12) center;
            background-size:r(30) r(16);
             select{
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                font-size: r(26);
                text-indent: r(20);
                vertical-align: top;
                color: #000;
                 appearance: none;
                -webkit-appearance:none;
                -moz-appearance:none;
                outline: none;
            }
       }
        }    
        section{
            width: 100%;
            position:absolute;
            top: r(150);
            bottom: r(136);
            overflow-y: scroll;
            .carous{
                 width: 100%;
                // height: px(285px);
                 overflow: hidden;
                img{
                    width: 100%;
                    //height: 100%;
                }
            }
            article{
                .title{
                    width: 100%;
                    margin-top: r(34);
                    p:nth-of-type(1){
                        margin-left: r(21);
                        img{
                            //@include bgg(56px,54px);
                            width: r(56);
                            height: r(54);
                        }
                        span{
                            font-size: r(30);
                            color: #000;
                            line-height: r(54);
                            vertical-align:top;
                        }
                    }
                     p:nth-of-type(2){
                         margin-right: r(21);
                        a{
                            color: #000;
                            font-size: r(24);
                            line-height: r(54);
                            i{
                                color: #ff9344;
                                position: relative;
                                top: r(2);
                            }
                        }
                    }
                }
                .shop{
                        margin: 0 auto;
                    li{
                        float: left;
                        width: r(241);
                        height: r(94);
                        //background:#ff9344 ;
                        border: 1px solid #f2e9f7;
                        border-bottom: none;
                        overflow: hidden;
                        margin-bottom:r(29); 
                        margin-left: r(77);
                        overflow: hidden;
                        &:nth-child(3),&:nth-child(4){
                            margin-bottom: 0;
                        }
                        &:nth-child(2),&:nth-child(4){
                            margin-left: r(103);
                        }
                        img{
                           // @include bgg(200%,200%);
                           width: 100%;
                        }
                    }
                }
                .shopinfo{
                    margin-left: r(21);
                    margin-right: r(14);
                   li{
                       margin-bottom: r(30);
                        .shopimg{
                            width: r(211);
                            height: r(164);
                            overflow: hidden;
                            img{
                               width: 100%;
                            }
                        }
                        .shoptext{
                            width: 65%;
                            span{
                                font-size: r(22);
                                color: #494949;
                                line-height: r(49);
                            }
                            p:nth-of-type(1){
                                margin-top: r(19);
                                span:nth-child(1){
                                    color: #000;
                                    font-size: r(32);
                                }
                            }
                            p:nth-of-type(2){
                                span{
                                    padding-left: r(8);
                                }
                            }
                             p:nth-of-type(3){
                                span:nth-child(1){
                                    color: #ff9344;
                                    font-size: r(32);
                                }
                            }
                        }
                    }
                }
         }
        }
        footer{
            width: 100%;
            height:r(136);
            background: white;
            position: absolute;
            bottom: 0;
            left: 0;
            ul li{
                width: 25%;
                height: 100%;
                float: left;
                text-align: center;
                .iconfont{
                    color: transparent;
                    font-size: r(60);
                    -webkit-text-stroke: 1px #ff9344;
                }
                &.active .iconfont{
                    color: #ff9344;
                }
                &:hover .iconfont{
                    color: #ff9344;
                }
            }
            a{
                color: #000;
                
            }
        }

